<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/public.css">
		<script src='js/jquery-3.3.1.min.js'></script>
		<script type="text/javascript">
			document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px';
		</script>
	</head>
	<style>
		body {
			background-color: #f3f5f7;
		}
		li{
			list-style: none;
		}

		.tab {
			height: .8rem;
			padding-left: .2rem;
			padding-right: .2rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: PingFang-SC;
			font-size: .28rem;
			color: #333333;
			border-bottom: .01rem solid rgb(230, 230, 230);
			background-color: white;
			margin-bottom: .1rem;
		}

		.ul li {
			display: none;
		}

		.ul li.show {
			display: block;
		}

		.t {
			position: relative;
		}

		.line {
			width: .3rem;
			height: .04rem;
			background-color: #56abf6;
			margin-left: 40%;
			position: absolute;
			top: .52rem;
			display: none;

		}

		.select {
			display: block;
		}

		.blue {
			color: #56ABF6;
			font-size: .32rem;
		}
		.box1{
			background-color: white;
			padding-bottom: .2rem;
			margin-bottom: .2rem;
		}
		.box1 h1{
			font-family: PingFang-SC;
			font-size: .34rem;
			color: #474747;
			margin-top: .2rem;
			margin-left: .3rem;
			margin-bottom: .2rem;
		}
		.box2{
			padding-left: .3rem;
			padding-right: .3rem;
			display: flex;
			justify-content: space-between;
		}
		.b2{
			display: flex;
			align-items: center;
			flex-direction: column;
		}
		.b2 img{
			width: 1.46rem;
			height: 1.46rem;
			border-radius: .06rem;
			
		}
		.b2 span{
			font-family: PingFang-SC;
			font-size: .24rem;
			color: #666666;
		}
	.a{
		width: 6.9rem;
		height: 1.8rem;
		margin-left: .3rem;
		margin-top: .1rem;
		display: flex;
		align-items: center;
		background-color: white;
	
		
	}
	.a img{
		width: 1.46rem;
		height: 1.46rem;
		border-radius: .06rem;
		margin-left: .2rem;
		
	}
	.a1{
		margin-left: .2rem;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 1rem;
		
	}
	.a1 span:nth-of-type(1){
		font-family: PingFang-SC;
		font-size: .28rem;
		color: #333333;
		
	}
	.a1 span:nth-of-type(2){
		font-family: PingFang-SC;
		font-size: .24rem;
		color: #666666;
	}
	</style>
	<body>
		<header class="header">
			<img src="img/back.png" class="back">
			<span>大咖讲坛</span>
		</header>
		<div class="tab">
			<div class="t  blue">
				IT管理学院
				<p class="line select">

				</p>
			</div>
			<div class="t">
				CT管理学院
				<p class="line">

				</p>
			</div>
			<div class="t">
				AI学院
				<p class="line">

				</p>
			</div>
			<div class="t">
				人文学院
				<p class="line">

				</p>
			</div>
		</div>
		<div class="ul">
			<li class="show">
				
				<div class="box1">
					<h1>推荐讲师</h1>
					<div class="box2">
						
						<div class="b2">
							<img src="img/touxiang.png" >
							<span>杰克</span>
						</div>
						<div class="b2">
							<img src="img/touxiang.png" >
							<span>杰克</span>
						</div>
						<div class="b2">
							<img src="img/touxiang.png" >
							<span>杰克</span>
						</div>
						<div class="b2">
							<img src="img/touxiang.png" >
							<span>杰克</span>
						</div>
					</div>
				</div>
				<div class="list">
					<div class="a">
						<img src="img/touxiang.png" >
						<div class="a1">
							<span>不蔓不枝</span>
							
							<span>代表作品介绍</span>
						</div>
					</div>
					<div class="a">
						<img src="img/touxiang.png" >
						<div class="a1">
							<span>不蔓不枝</span>
							
							<span>代表作品介绍</span>
						</div>
					</div>
					<div class="a">
						<img src="img/touxiang.png" >
						<div class="a1">
							<span>不蔓不枝</span>
							
							<span>代表作品介绍</span>
						</div>
					</div>
				</div>
						
		
				
			</li>
				<li>
					
					<div class="box1">
						<h1>推荐讲师</h1>
						<div class="box2">
							
							<div class="b2">
								<img src="img/touxiang.png" >
								<span>杰克1</span>
							</div>
							<div class="b2">
								<img src="img/touxiang.png" >
								<span>杰克</span>
							</div>
							<div class="b2">
								<img src="img/touxiang.png" >
								<span>杰克</span>
							</div>
							<div class="b2">
								<img src="img/touxiang.png" >
								<span>杰克</span>
							</div>
						</div>
					</div>
					<div class="list">
						<div class="a">
							<img src="img/touxiang.png" >
							<div class="a1">
								<span>不蔓不枝</span>
								
								<span>代表作品介绍</span>
							</div>
						</div>
						<div class="a">
							<img src="img/touxiang.png" >
							<div class="a1">
								<span>不蔓不枝</span>
								
								<span>代表作品介绍</span>
							</div>
						</div>
						<div class="a">
							<img src="img/touxiang.png" >
							<div class="a1">
								<span>不蔓不枝</span>
								
								<span>代表作品介绍</span>
							</div>
						</div>
					</div>
							
			
					
				</li>
					<li>
						
						<div class="box1">
							<h1>推荐讲师</h1>
							<div class="box2">
								
								<div class="b2">
									<img src="img/touxiang.png" >
									<span>杰克2</span>
								</div>
								<div class="b2">
									<img src="img/touxiang.png" >
									<span>杰克</span>
								</div>
								<div class="b2">
									<img src="img/touxiang.png" >
									<span>杰克</span>
								</div>
								<div class="b2">
									<img src="img/touxiang.png" >
									<span>杰克</span>
								</div>
							</div>
						</div>
						<div class="list">
							<div class="a">
								<img src="img/touxiang.png" >
								<div class="a1">
									<span>不蔓不枝</span>
									
									<span>代表作品介绍</span>
								</div>
							</div>
							<div class="a">
								<img src="img/touxiang.png" >
								<div class="a1">
									<span>不蔓不枝</span>
									
									<span>代表作品介绍</span>
								</div>
							</div>
							<div class="a">
								<img src="img/touxiang.png" >
								<div class="a1">
									<span>不蔓不枝</span>
									
									<span>代表作品介绍</span>
								</div>
							</div>
						</div>
								
				
						
					</li>
						<li>
							
							<div class="box1">
								<h1>推荐讲师</h1>
								<div class="box2">
									
									<div class="b2">
										<img src="img/touxiang.png" >
										<span>杰克</span>
									</div>
									<div class="b2">
										<img src="img/touxiang.png" >
										<span>杰克</span>
									</div>
									<div class="b2">
										<img src="img/touxiang.png" >
										<span>杰克</span>
									</div>
									<div class="b2">
										<img src="img/touxiang.png" >
										<span>杰克</span>
									</div>
								</div>
							</div>
							<div class="list">
								<div class="a">
									<img src="img/touxiang.png" >
									<div class="a1">
										<span>不蔓不枝</span>
										
										<span>代表作品介绍</span>
									</div>
								</div>
								<div class="a">
									<img src="img/touxiang.png" >
									<div class="a1">
										<span>不蔓不枝</span>
										
										<span>代表作品介绍</span>
									</div>
								</div>
								<div class="a">
									<img src="img/touxiang.png" >
									<div class="a1">
										<span>不蔓不枝</span>
										
										<span>代表作品介绍</span>
									</div>
								</div>
							</div>
									
					
							
						</li>
			
		</div>



	</body>
	<script >
			$('.tab div').click(function() {
					var i = $(this).index();
					$('.tab div').children("p").removeClass('select')
					$(this).children("p").addClass('select');
					$(this).addClass('blue').siblings().removeClass('blue');
		
		
					$('.ul li').eq(i).show().siblings().hide();
				});
				$(".gz").click(function() {
					$(".gz").hide()
					$(".gz1").show()
				})
		
				$(".gz1").click(function() {
					$(".gz").show()
				})
	</script>
</html>
